<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
    <link rel="stylesheet" type="text/css" href="/static/css/databasePage.css">
    <style>
        .loading{
            text-align: center;
            height: 0.3rem;
            line-height: 0.3rem;
            margin-top: 0.15rem;
            color: #C0C0C0;
            font-size: 12px;

        }
    </style>
</head>
<body class="F5">
<div id="app" class="database-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <a href="{:url('index/index/index');}"><div class="go-back"><img src="/static/images/go-back.png" alt=""></div></a>
                    <div class="text">搜索视频号相关知识</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    <div class="topContainer">
        <div class="search-box">
            <img src="/static/images/search.png" alt="">
            <input id="keyword" type="text" placeholder="请输入搜索">
            <input id="cate" type="hidden" value="0" >
        </div>
        <div class="carousel-container" id="databaseCarousel">
            <div class="carousel-wrapper">
                {volist name="slideshow" id="slide"}
                <a href="#" class="carousel-item">
                    <img src="{$slide['cover']}" alt="">
                </a>
                 {/volist}
            
            </div>
            <div class="carousel-dots"></div>
        </div>
        <div class="tab">
            <div class="tab-item tab-act" onclick="choiceTab(this, 0)">
                <div>推荐</div>
                <img src="/static/images/dots-act.png" alt="">
            </div>
            {volist name="cateList" id="cate"}
            <div class="tab-item" onclick="choiceTab(this, {$cate['id']})">
                <div>{$cate['title']}</div>
                <img src="/static/images/dots-act.png" alt="">
            </div>
            {/volist}

            

        </div>
    </div>
    <div id="rm_con" class="btmContainer">
    </div>
</div>
<script src="/static/js/common.js"></script>
<script>
    new Carousel('databaseCarousel', 3000);

    const choiceTab = (tab, index) => {
        // 移除所有 Tab 的 tab-act 类
        $('.tab-item').removeClass('tab-act');
        
        // 给当前点击的 Tab 添加 tab-act 类
        $(tab).addClass('tab-act');
        $("#cate").val(index);
                page = 1;
                var s_key = $("#keyword").val();
                $('#rm_con').html('');
                load_url(s_key);
    }
   
            function getScrollTop() {
                var scrollTop = 0;
                if (document.documentElement && document.documentElement.scrollTop) {
                    scrollTop = document.documentElement.scrollTop;
                } else if (document.body) {
                    scrollTop = document.body.scrollTop;
                }
                return scrollTop;
            }
            function getClientHeight() {
                var clientHeight = 0;
                if (document.body.clientHeight && document.documentElement.clientHeight) {
                    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                } else {
                    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                }
                return clientHeight;
            }
            function getScrollHeight() {
                return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
            }

            var page = 1;
            var lock = 1;
            function load_html(result) {
                var lists = result.data;
                if (lists.length > 0) {
                    for (i = 0, ii = lists.length; i < ii; i++) {
                        var tmp_html = '';
                        var tmp_data = lists[i];
          
                        tmp_html += '<div onclick="gotoDetail('+tmp_data.id+')" class="card">';
                        tmp_html += '    <div class="imgBox">';
                        tmp_html += '        <div class="tips">';
                        tmp_html += '            <div class="yuan">';
                        tmp_html += '                <img src="/static/images/liveIcon.png" alt="">';
                        tmp_html += '            </div>';
                        tmp_html += '            <div class="text">'+tmp_data.read_count+'观看</div>';
                        tmp_html += '        </div>';
                        tmp_html += '        <img class="bannerImg" src="'+tmp_data.cover+'" alt="">';
                        tmp_html += '    </div>';
                        tmp_html += '    <div class="title">'+tmp_data.title+'</div>';
                        tmp_html += '</div>';

    //                    if (tmp_data.m_qrcode != '') {
    //                        tmp_html = tmp_html + '<div class="rm_ewm" id="' + tmp_data.mobile + '"><img src="/assets/img2/ewm.png"></div>';
    //                    }
    //                    tmp_html = tmp_html + '</div>';
                        $('#rm_con').append(tmp_html);
                    }
                    if (lists.length <= 0) {
                        $('#rm_con').append('<div class="loading">- 加载完成 -</div>');
                    } else {
                        lock = 0;//解除加载锁
                    }
                } else {
                    $('#rm_con').append('<div class="loading">- 加载完成 -</div>');
                }
            }
            function load_url(keyword) {
                var url = '{:url("index/School/list",[],false)}';
                var cid = $("#cate").val();
                $.get(url,{"page":page,"keyword":keyword,"cid":cid}, function (ret) {
                    load_html(ret);
                }, 'json');
            }

            $(function () {
                $(window).scroll(function () {
                    var sH = getScrollHeight();
                    var sT = getScrollTop();
                    var cH = getClientHeight();
                    if (sH - cH - sT < 50) {
                        if (lock == 0) {
                            lock = 1;//防止重复加载
                            page = page + 1;
                            var s_key = $("#phoneNum").val();
                            load_url(s_key);
                        }
                    }
                    console.log(sH + ',' + sT + ',' + cH);
                });
                var s_key = $("#phoneNum").val();
                load_url(s_key);
            });
            $('#keyword').on('input', function () {
                page = 1;
                var s_key = $("#keyword").val();
                $('#rm_con').html('');
                load_url(s_key);
            });
            
      function gotoDetail(id){
          window.location.href = "{:url('index/School/detail','','',true)}?id="+id;
      }
        </script>
</body>
</html>